<template>
	<div class="register-from-box">	
		<transition 
			@before-enter='msgBoxBefore'
			@enter='msgBoxEnter'
			@before-leave='MsgBoxBeforeLeave'
			@leave='MsgBoxLeave'
		>
			<div class="form-msg-box" v-show='showMsgBox'>
				<div class="form-msg-box-l">
					<span class="iconfont msg-box-suc-ico">
						&#xe607;
					</span>
				</div>
				<div class="form-msg-box-c">
					<p>
						{{msg_tip}}
					</p>
				</div>
				<div class="form-msg-box-r" @click="closeMsgBox">
					<span class="iconfont msg-box-close-ico">
						&#xe644;
					</span>
				</div>
			</div>
		</transition>
				
		<div class="from-title">
			<transition 
				appear 
				enter-active-class='animated lightSpeedIn faster'
			>
				<p class="from-title-p">
					加入会员
				</p>
			</transition>
		</div>
		
		<div class="from-box">
			<div class="box-l">
				<p class="box-l-p">
					用户名
				</p>
			</div>
			<div class="box-r">
				<input 
					class="from-username" 
					type="text" 
					placeholder="手机号/邮箱/昵称" 
					v-model="register_name" 
					@blur="RegisterBlur"
				/>
			</div>
		</div>
		
		<div class="from-box">
			<div class="box-l">
				<p class="box-l-p">
					密码
				</p>
			</div>
			<div class="box-r">
				<input 
					class="from-username" 
					type="password" 
					placeholder="密码必须为1-16位" 
					v-model="register_pass" 
				/>
			</div>
		</div>
	
		<div class="from-box">
			<div class="box-l">
				<p class="box-l-p">
					重复密码
				</p>
			</div>
			<div class="box-r">
				<input 
					class="from-username" 
					type="password" 
					placeholder="重复输入密码" 
					v-model="register_repeat_pass" 
				/>
			</div>
		</div>
	
		<div class="from-box">
			<div class="box-l">
				<p class="box-l-p">
					头像
				</p>
			</div>
			<div class="box-r">
				<input 
					class="from-username" 
					type="text" 
					placeholder="输入图片地址 选填" 
					v-model="register_url" 
				/>
			</div>
		</div>
		
		<div class="button-box">
			<button 
					class="register-button"
					:class='{ 
						RegisterButtonActive: RegisterIsActive, 
						ButtonDisable: RegisterButton
					}'
					:disabled='RegisterButton'
					@touchstart="Registertouchstart()" 
					@touchend="Registertouchend()"
					@click="register()"		
			>
				注册
			</button>
		</div>
		
		<router-link to='/users' tag='p' class="users-loc">
			已有账号？立即登录
		</router-link>
		
		<div class="register-tip">
			<p 
				class="register-tip-err" 
				v-show='show_err' 
				v-text="error_tip"
			>
			</p>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'register-form',
		data () {
			return {
				RegisterIsActive: false,
				register_name: '',
				register_pass: '',
				register_repeat_pass: '',
				register_url: '',
				RegisterButton: false,
				showMsgBox: false,
				show_err: false,
				error_tip: '',
				msg_tip: ''
			}
		},
		methods: {
			msgBoxBefore (el) {
				el.style.top = -80
			},
			msgBoxEnter (el, done) {
				Velocity(el, {
					top: 0
				},{
					duration:500,
					delay:0,
					complete: done
				})
			},
			MsgBoxBeforeLeave (el) {
				el.style.top = 0
			},
			MsgBoxLeave (el, done) {
				Velocity(el, {
					top: -120
				},{
					duration:500,
					delay:0,
					complete: done
				})
			},
			closeMsgBox () {
				this.showMsgBox = false
			},
			// 按钮点击态
			Registertouchstart () {
				this.RegisterIsActive = true
			},
			Registertouchend (){
				this.RegisterIsActive = false
			},
			// 失焦验证用户名
			RegisterBlur () {
				var _this = this
				axios.post('/users/validation',{
					'validation_name': _this.register_name,
				})
				.then( response=> {
					let res = response.data
					if (res.data == 1) {
						_this.show_err = true
						_this.error_tip = '用户名已存在'
						_this.RegisterButton = true
					} else {
						_this.show_err = false
						_this.error_tip = ''
						_this.RegisterButton = false
					}
				})
			},
			// 注册
			register () {
				var _this = this
				if (_this.register_name == '') {
					_this.show_err = true
					_this.error_tip = '请输入账号'
					return 					
				}
				if (_this.register_pass == '') {
					_this.show_err = true
					_this.error_tip = '请输入密码'
					return 
				}
				if (_this.register_pass != _this.register_repeat_pass) {
					_this.show_err = true
					_this.error_tip = '两次密码输入不一致'
					return 
				}
				_this.error_tip = ''
				axios({
					method: 'post',
					url: '/users/register',
					data: {
						'register_name': _this.register_name,
						'register_pass': _this.register_pass,
						'register_repeat_pass': _this.register_repeat_pass,
						'register_url': _this.register_url
					}
				})
				.then( response=> {
					let res = response.data
					if (res.msg == '注册成功') {
						//_this.show_err = true
						_this.msg_tip = '注册成功'
						_this.showMsgBox = true
						setTimeout( ()=> {
							_this.showMsgBox = false
						},2400)
					}
				})
				.catch( error=> {
					console.log('REQUEST ERROR:' + error)
				})
				
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.register-from-box
		margin-top:30px
		.form-msg-box
			width:420px
			height:80px
			background:#4CAF50
			position:absolute
			top:-80px
			left:50%
			margin-left:-210px
			display:flex
			flex-direction:row
			color:#fff
			border-radius:6px
			.form-msg-box-l
				width:80px
				height:100%
				display:flex
				align-items:center
				justify-content:center
				.msg-box-suc-ico
					font-size:33px
			.form-msg-box-c
				width:266px
				height:100%
				display:flex
				align-items:center
				
				text-align:left
			.form-msg-box-c p
				font-size:28px
				
			.form-msg-box-r
				width:74px
				height:100%
				display:flex
				align-items:center
				justify-content:center
				.msg-box-close-ico
					font-size:29px
		.register-hr
			height:2px
			background:#ccc
	.register-from-box input
		border:none
		outline:none
	.from-title
		padding:20px
		margin-bottom:34px
		.from-title-p
			color:#444
			font-size:58px
			letter-spacing:2px
			margin-left:12px
	.from-box
		background:#fff
		display:flex
		flex-direction:row
		.box-l
			width:34%
			height:100px
			display:flex
			align-items:center
			.box-l-p
				color:#444
				font-size:28px
				margin-left:34px
		.box-r
			width:66%
			height:100px
			display:flex
			align-items:center
			.from-username
				width:100%
				height:84px			
				font-size:28px
			input::-webkit-input-placeholder
				color:#AEADAC
	.button-box
		padding:0 0 10px 0
		text-align:center
		.register-button
			font-size:32px
			color:#fff
			border:none
			padding:26px 320px
			margin-top:30px
			background:#4A90E2
			border-radius:8px
			outline:none
		.RegisterButtonActive
			background:#2275D7
		.ButtonDisable
			background:#c5c5c5
	.users-loc
		display:inline-block
		margin:20px 0 0 22px
		cursor:pointer
		color:#AEADAC
		font-size:26px
	.register-tip
		padding:22px
		margin-top:12px
		font-size:26px
		.register-tip-err
			color:red
</style>
